<template>
	<view class="order-wrapper">
		<u-tabs :list="list" :is-scroll="false" :current="current" :show-bar="false" @change="tabChange"></u-tabs>
		<scroll-view scroll-y style="flex:1;background-color: rgb(242, 242, 242);" :scroll-with-animation="true"
			:scroll-top="scrollTop[current].scrollTop" @refresherpulling="scrollPulling" @scrolltolower="reachBottom">
			<view class="page-box">
				<template v-if="orderList.length">
					<view class="order-item" v-for="item in orderList" :key="item.id" @click="() => toDetail(item)">
						<view class="order-item-header">
							<view class="">
								单号：{{item.mallOrderCode}}
							</view>
							<view class="">
								{{orderStatusMap[item.orderState]}}
							</view>
						</view>
						<view class="order-item-content">
							<u-image src="@/static/image/logo.png" mode="" width="130rpx" height="130rpx"
								border-radius="12"></u-image>
							<view class="order-item-right">
								<view class="order-item-title">
									{{item.orderTitle}}
								</view>
								<view class="order-item-desc">
									{{item.createTime}}
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="loadStatus[current]" bgColor="#f2f2f2"></u-loadmore>
				</template>
				<template v-else>
					<Empty />
				</template>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	import Empty from './components/Empty'
	import {
		mapState
	} from 'vuex'
	const orderStatusMap = {
		//；； 
		1: '待付款',
		2: '待发货',
		3: '待工厂收件',
		4: '清洗中',
		11: '待打包',
		12: '待寄回',
		13: '待到货',
		14: '待确收',
		30: '已完成',
		99: '失效'
	}
	export default {
		data() {
			return {
				refresherTriggered: false,
				orderStatusMap,
				list: [{
						name: '全部',
					},
					{
						name: '待取衣',
					},
					{
						name: '洗护中',
					},
					{
						name: '已完成',
					},
					{
						name: '已取消',
					},
				],
				scrollTop: [{
						scrollTop: 0,
						oldScrollTop: 0
					},
					{
						scrollTop: 0,
						oldScrollTop: 0
					},
					{
						scrollTop: 0,
						oldScrollTop: 0
					},
					{
						scrollTop: 0,
						oldScrollTop: 0
					},
					{
						scrollTop: 0,
						oldScrollTop: 0
					},
				],
				current: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore'],
				params: [{
						page: 0,
						rows: 10,
						orderState: ''
					},
					{
						page: 0,
						rows: 10,
						orderState: 2
					},
					{
						page: 0,
						rows: 10,
						orderState: 4
					},
					{
						page: 0,
						rows: 10,
						orderState: 30
					},
					{
						page: 0,
						rows: 10,
						orderState: 99
					}
				],
				orderList: [],
			}
		},
		computed: {
			...mapState({
				isGetPhone: (state) => {
					return state.isGetPhone
				}
			})
		},
		components: {
			Empty
		},
		watch: {},
		onShow() {
			if (this.isGetPhone) {
				this.toLoginPage()
				return
			}
			this.current = uni.getStorageSync('orderIndex')
			this.dropDown(this.current || 0)
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
		},
		methods: {
			scrollPulling(data) {
				console.log(data)
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/order/order-details?mallOrderId=${item.mallOrderId}`
				})
			},
			toLoginPage() {
				uni.reLaunch({
					url: '/pages/login'
				})
			},
			tabChange(index) {
				this.current = index
				uni.setStorageSync('orderIndex', index)
				this.dropDown(index)
			},
			reachBottom() {
				console.log('reachBottom')
				console.log(this.loadStatus[this.current])
				this.pullUp(this.current)
			},
			// 下拉刷新
			dropDown(idx) {
				// 修改当前view的数据
				this.params[idx].page = 1;
				// 加载下拉刷新的数据
				this.postFindOrderMallList(idx, 'down');
			},
			// 上拉加载
			pullUp(idx) {
				// 增加页数
				this.params[idx].page++;
				// 请求获取精品推荐商品数据
				this.postFindOrderMallList(idx, 'up');
			},
			// 商城订单-查询订单列表
			postFindOrderMallList(idx, type) {
				console.log(this.params[idx], idx, type);
				this.$u.api
					.postFindOrderMallList(this.params[idx])
					.then(res => {
						uni.stopPullDownRefresh();
						// 如果是规格商品，将所有的商品信息修改成规格的商品信息
						res.data.rows = res.data.rows.map(item => {
							const goodsObj = item.goodsSku ? JSON.parse(item.goodsSku) : {}
							return {
								...item,
								goodsPrice: goodsObj.price,
								integral: goodsObj.integral,
								goodsImages: goodsObj.specImages,
								purchasePrice: goodsObj.purchasePrice
							}
						})
						// 如果是上拉加载
						if (type == 'up') {
							// 判断分页
							if (this.params[idx].page <= res.data.totalPage) {
								this.orderList = [...this.orderList, ...res.data.rows]
								this.loadStatus[idx] = 'loading';
								// 如果数量小于页容量，显示没有更多数据
								if (res.data.rows.length < this.params[idx].rows) {
									this.loadStatus[idx] = 'nomore';
								}
							} else {
								this.params[idx].page = res.data.totalPage;
								this.loadStatus[idx] = 'nomore';
							}
						}

						// 如果是下拉刷新
						if (type == 'down') {
							// 将数据
							this.orderList = [...res.data.rows]
							this.$nextTick(() => {
								this.scrollTop[idx].scrollTop = 1;
							});
						}
					})
					.catch(err => {
						console.log(err);
					});
			},

		}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	.order-wrapper {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.order-item {
		background-color: #fff;
		margin: 34rpx;
		border-radius: 28rpx;
		box-shadow: 0px 0px 13px -2px rgba(0, 0, 0, 0.26);
	}

	.order-item-header {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 18rpx;
		margin: 0rpx 30rpx;
		font-size: 26rpx;
		border-bottom: solid 1rpx #e9e9e9;
	}

	.order-item-content {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.order-item-right {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-end;
		text-align: right;
	}

	.order-item-title {
		font-size: 30rpx;
	}

	.order-item-desc {
		font-size: 24rpx;
		color: #515151;
	}
</style>